import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import Moment from 'moment';
import {
    Avatar,
    Press,
    FastImage,
} from './../../../components'

interface Props {
    data?: any,
    onPress:Function,
    dotNum?:number
}

import * as Const from './../../../const';
import parseUrl from './../../../utils/parseUrl';

class Row extends PureComponent<Props> {

    static defaultProps = {
        data: {},
        dotNum:0,
        onPress:() => null
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get isOnline() {
        const {
            isOnline = 0
        } = this.Data;
        return !!isOnline;
    }

    get avatar() {
        const {
            avatorUrl = ``
        } = this.Data;
       return parseUrl(avatorUrl);
    }

    get nickName() {
        const {
            userName
        } = this.Data;
        return userName || ``;
    }

    get message() {
        const {
            lastMesg
        } = this.Data;
        return lastMesg || ``;
    }

    get time() {
        const {
            created = 0
        } = this.Data;
        const format = `MMM DD, YYYY HH:mm`;
        return Moment(created * 1000).format(format);
    }

    render() {
        const {
            onPress,
            dotNum=0
        } = this.props;

        return (
            <Press
                value={this.Data}
                onPress={onPress}
                style={styles.chatRow}
            >
                <View style={styles.rowContent}>
                    <View>
                        <Avatar
                            size={64}
                            url={this.avatar}
                        />
                        {dotNum > 0 && (
                            <View style={styles.dotStyle} />
                        )}
                    </View>
                    <View style={styles.right}>
                        <View style={styles.content}>
                            <Text style={styles.nickName}>
                                {this.nickName}
                            </Text>
                            <Text style={styles.time}>
                                {this.time}
                            </Text>
                        </View>
                        <Text
                            numberOfLines={1}
                            style={styles.message}
                        >
                            {this.message}
                        </Text>
                    </View>
                </View>
            </Press>
        )
    }
}

export default Row;

const styles = StyleSheet.create({
    chatRow: {
        paddingHorizontal:16,
        backgroundColor:`#fff`,
        borderBottomWidth:1,
        borderColor:`#eff3f7`
    },
    rowContent: {
        alignItems:`center`,
        flexDirection:`row`,
        paddingVertical:14
    },
    right:{
        flex:1,
        paddingLeft:16
    },
    content: {
        alignItems:`center`,
        flexDirection:`row`,
        justifyContent:`space-between`
    },
    nickName:{
        fontSize:18,
        color:`#333`,
        fontWeight:`bold`
    },
    time:{
        fontSize:12,
        color:`#999`,
        paddingRight:6
    },
    message:{
        fontSize:16,
        marginTop:8,
        color:`#999`
    },
    dotNum:{
      fontSize:10,
      color:`#fff`,
    },
    dotStyle:{
        right:2,
        top:2,
        width:10,
        height:10,
        borderRadius:6,
        position:`absolute`,
        backgroundColor:Const.color
    }
}) as any;